import "./index.css";
import { useState, useEffect } from "react";
import CustomDropdown from "../customdropdown";
import Map from "../map";
import { updateTRecord } from "../../utils/auth_access_util";
import LoadingOverlay from '../loadingOverLay';
import Counter from '../counter';

export default function UseAPI() {

  const [isVisible, setIsVisible] = useState(false); //控制弹框的显隐
  const [addr, setAddr] = useState("");
  const [longitude, setLongitude] = useState("");
  const [latitude, setLatitude] = useState("");
  const [timestamp, setTimestamp] = useState(0);
  const [selectedOption, setSelectedOption] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  const openLocationDialog = (timestamp) => {
    //控制弹框的显示隐藏
    setIsVisible(true);
  };

  const setTtamp = (timestamp) => {
    setTimestamp(timestamp);
  }

  const closeLocationDialog = () => {
    //控制弹框的显示隐藏
    setIsVisible(false);
  };

  const handleSelect = (selectedOption) => {
    console.log("选中的option", selectedOption);
    setSelectedOption(selectedOption);
  };

  const handleDataFromChild = (addr, longitude, latitude) => {
    setAddr(addr);
    setLongitude(longitude);
    setLatitude(latitude);
    console.log("从子组件接收到的地址数据:", addr, longitude, latitude);
  };

  const handleDataFromChild2 = (isLoading) => {
    setIsLoading(isLoading);
    console.log("从子组件接收到的loading数据:", isLoading);
  };

  //确认打卡
  const confirmSignClock = async () => {
    const res = await updateTRecord(
      selectedOption.record_id,
      longitude,
      latitude,
      timestamp,
    );
    console.log("后端返回的res：", res);
    if (res.status === 200) {
      window.tt.showToast({
        title: "打卡成功",
        duration: 3000,
        icon: "success",
        mask: false,
        success(res) {
          //控制弹框的显示隐藏
          setIsVisible(false);
          console.log(JSON.stringify(res));
        },
        fail(res) {
          //控制弹框的显示隐藏
          setIsVisible(false);
          console.log(`showToast fail: ${JSON.stringify(res)}`);
        },
      });
    } else {
      window.tt.showToast({
        title: "打卡失败",
        duration: 3000,
        icon: "error",
        mask: false,
        success(res) {
          //控制弹框的显示隐藏
          setIsVisible(false);
          console.log(JSON.stringify(res));
        },
        fail(res) {
          //控制弹框的显示隐藏
          setIsVisible(false);
          console.log(`showToast fail: ${JSON.stringify(res)}`);
        },
      });
    }
  };

  return (
    <div className="useapi">
      <LoadingOverlay isLoading={isLoading} />
      {isVisible && (
        <div className="select-dropdown">
          <CustomDropdown
            onSelect={handleSelect}
            placeholder="请选择关联工单"
          />
          <div style={{ width: "100%", margin: "15px 0" }}>
            <span>当前位置：{addr}</span>
            <span></span>
          </div>
          <div style={{ margin: "15px 0" }}>是否按照当前位置签到？</div>
          <div
            style={{
              marginTop: "30px",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <div
              onClick={closeLocationDialog}
              style={{
                width: "100px",
                height: "40px",
                boxShadow: "0px 0px 1px 0px rgba(0,0,0,0.49)",
                borderRadius: "30px",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              否
            </div>
            <div
              onClick={confirmSignClock}
              style={{
                background: "#3289FF",
                color: "white",
                width: "100px",
                height: "40px",
                boxShadow: "0px 0px 1px 0px rgba(0,0,0,0.49)",
                borderRadius: "30px",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              是
            </div>
          </div>
        </div>
      )}
      {/* <div className="attendence" onClick={openLocationDialog}>
        打卡
      </div> */}
      <Counter onCheckIn={openLocationDialog} setTtamp={setTtamp}/>
      <Map onSendData={handleDataFromChild} onSendData2={handleDataFromChild2} />
    </div>
  );
}
